<template>
  <div class="box">
    <div class="header">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
    </div>
    <div class="main">
      <van-swipe style="height: 100%" :autoplay="3000">
        <van-swipe-item
          ><img
            src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658768400&t=3c4bea7c0f6b1c3b4445f745f0008016"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1658768400&t=6dce438f354d00353bee8e8d55411975"
            alt=""
        /></van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <div class="footer">
      <van-icon name="arrow-left" class="c" style="height: 100%" />
      <van-icon name="arrow" class="c" style="height: 100%" />
    </div>
  </div>
</template>
<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box {
  height: 667.2px;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: rgba(248, 248, 248, 100);
}
.header .b {
  margin-left: 9px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.main {
  flex: 1;
  position: relative;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.1);
}
img {
  width: 100%;
  height: 100%;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.footer {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
}
.footer .c {
  background-color: rgba(248, 248, 248, 100);
}
</style>
